<template>
	<view :data-theme="theme" class="container">
		<!-- 搜索 -->
		<view class="header">
			<view class="bg_color" style="padding: 24rpx 24rpx;">
				<u-search v-model="productClassValue" @custom="searchProduct" @search="searchProduct"
					placeholder="请输入关键字搜索类目" actionText="搜索" :actionStyle="{color:'#FFF'}" shape="square"
					style="flex: none;" clearabled></u-search>
			</view>
		</view>
		<view class="scroll-view" style="overflow: hidden;">
			<!-- 滑动选择大类列表--------------------------------------- -->
			<!--  展开的所有分类 遮罩层 -->
			<view v-if="showAllClassFlag" class="all-class-wrap" :style="{ top: `114rpx`, height: `95%` }"
				@click.stop="setShowAllClassFlagFn(false)" @touchend.stop="setShowAllClassFlagFn(false)">
				<view class="class-top" style="display: flex;background-color: #fff;justify-content: space-between;">
					<view style="padding: 20rpx;font-size: 29rpx;font-weight: bolder;">
						全部分类
					</view>
					<view style="height: 40px;
						font-size: 29rpx;
						text-align: center;
						line-height: 40px;
						margin-right: 30rpx;
						color: #000;" @click="setShowAllClassFlagFn(false)">
						收起
					</view>
				</view>

				<view class="class-item-block" @click.stop="catchTouchMove" @touchend.stop="catchTouchMove">
					<view class="class-list" style="padding-bottom: 20rpx;">
						<view class="class-item" v-for="(item, index) in topBigClassData" :key="index"
							:class="[index == topBigClassActive ? 'act' : '']" @click="topBigClassClickFn(item, index)">
							<view class="class-item-text" :class="index == topBigClassActive ? 'active-item' : ''">
								{{ item.name }}
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 展开所有分类的 全部按钮  -->
			<view class="class-link-btn">
				<view class="show-all-class-btn" @click="allClassBtnClickFn" v-if="topBigClassData.length > 5">
					<view class="text">全</view>
					<view class="text">部</view>
					<uni-icons type="bottom" size="15"></uni-icons>
				</view>

				<view class="btn-link-scroll-wrap">
					<scroll-view class="btn-link-scroll-view-dom" :scroll-x="true" :scroll-with-animation="true">
						<view v-for="(item, index) in topBigClassData" :key="index" class="item"
							:class="[index == topBigClassActive ? 'act' : '']" @click="topBigClassClickFn(item, index)">
							<text class="border-radius" :class="index == topBigClassActive ? 'qian_color' : ''">
								{{ item.name }}
							</text>
						</view>
						<view class="item" style="width: 90rpx; height: 100%;" v-if="topBigClassData.length > 5"></view>
					</scroll-view>
				</view>
			</view>


			<view class="categories productSort">
				<!-- 左侧：二级分类 -->
				<!-- <scroll-view class="primary" style="height: 100%; overflow: hidden;" scroll-with-animation='true' scroll-y="true">
					<view v-for="(itemn,indexn) in multiArray" :key="itemn.id">
						<view class="item" v-for="(itemt,indext) in itemn.childList" :key="itemt.id" @click="selectCategory(indext)"
							:class="{ active: indext == topBigClassActive }">
							<text class="name">{{itemt.name}}</text>
						</view>
					</view>
				</scroll-view> -->
				<view class='aside'>
					<scroll-view scroll-y="true" style="height: 100%; overflow: hidden;" scroll-with-animation='true'>
						<block v-for="(itemn,indexn) in multiArray" :key="itemn.id">
							<view v-if="indexn == topBigClassActive" v-for="(item,index) in itemn.childList"
								:key="item.id">
								<view class='item acea-row row-center-wrapper'
									:class='index==leftSmallClassActive?"on":""'
									v-if='item.childList && item.childList.length > 0' :key="item.id"
									@click='selectCategory(index,item)' :id='"sort"+index'><text
										class="item_text skeleton-rect">{{item.name}}</text>
								</view>
							</view>
						</block>
					</scroll-view>
				</view>

				<!-- 右侧：三级分类 -->
				<scroll-view class="secondary threeCategory" scroll-y="true">
				
					<block>
						<view v-if="threeClassActiveItem.childList && threeClassActiveItem.childList.length > 0 "
							v-for="(item,index) in threeClassActiveItem.childList" :key="item.id">
							<view class='item acea-row row-center-wrapper' :class='index==thiredCategoryIndex?"on":""'
								v-if='item.childList && item.childList.length > 0' :key="item.id"
								@click='threeCategory(item,index)' :id='"sort"+index'><text
									class="item_text skeleton-rect">{{item.name}}</text>
							</view>
						</view>
					</block>
				</scroll-view>

				<!-- 右侧：四级分类 -->
				<scroll-view class="secondary" style="width: 200px;background-color: #fafafa;" scroll-y="true">
					<block>
						<view v-for="(item,index) in fourClassActiveItem" :key="item.id">
							<view class='item acea-row row-center-wrapper'
								:class='index==fourSmallClassActiveInd?"on":""' :key="item.id"
								@click='fourCategory(item,index)' :id='"sort"+index'><text
									class="item_text skeleton-rect">{{item.name}}</text>
							</view>
						</view>
					</block>

				</scroll-view>
			</view>
		</view>

		<!-- 底部 -->
		<!-- <view style="position: fixed;bottom: 0px;width: 100%;padding: 10px;background-color: #fff;">
			<button style="font-weight: bold;border-radius: 10px;color: #fff;padding: 20rpx;" class="bg_color"
				size="large" type="primary" @click="queryAddSort">确认</button>
		</view> -->
	</view>
</template>

<script>
	import {
		storeCategoryAllApi
	} from '@/api/product.js';
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	let app = getApp();
	export default {
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				multiArray: [{
					childList: [{
						childList: []
					}]
				}], //树状类组
				selectedCategory: 0, //变量，处理分类事件

				productClass: {}, //分类属性对象
				productClassValue: '',
				topBigClassData: [{
					id: 519,
					pid: 0,
					name: '海鲜类海鲜',
					isShow: true,
					icon: '',
					childList: [{
						id: 520,
						pid: 519,
						name: '黄鱼',
						isShow: true,
						icon: '',
						childList: [{
							id: 521,
							pid: 520,
							name: '小黄鱼01',
							isShow: true,
							icon: '',
							childList: [{
								id: 523,
								pid: 521,
								name: '小黄鱼04',
								isShow: true,
								icon: ''
							}, {
								id: 524,
								pid: 521,
								name: '小黄鱼02',
								isShow: true,
								icon: ''
							}]
						}, {
							id: 522,
							pid: 520,
							name: '小黄鱼02',
							isShow: true,
							icon: ''
						}]
					}]
				}, {
					id: 560,
					pid: 0,
					name: '时令水果',
					isShow: true,
					icon: '',
					childList: [{
						id: 561,
						pid: 560,
						name: '海南水果',
						isShow: true,
						icon: '',
						childList: [{
							id: 562,
							pid: 561,
							name: '香蕉',
							isShow: true,
							icon: ''
						}, {
							id: 563,
							pid: 561,
							name: 'XX02',
							isShow: true,
							icon: ''
						}]
					}]
				}, {
					id: 519,
					pid: 0,
					name: '时令水果3',
					isShow: true,
					icon: '',
					childList: []
				}, {
					id: 519,
					pid: 0,
					name: '时令水果4',
					isShow: true,
					icon: '',
					childList: []
				}, {
					id: 519,
					pid: 0,
					name: '时令水果5',
					isShow: true,
					icon: '',
					childList: []
				}, {
					id: 519,
					pid: 0,
					name: '时令水果6',
					isShow: true,
					icon: '',
					childList: []
				}],
				showAllClassFlag: false, // 显示所有分类的状态
				topBigClassActive: 0, // 顶部的大分类索引
				leftSmallClassActive: 0, // 左边小分类索引
				//---------------------****---------------------------
				threeClassActiveItem: {}, //三级分类目录
				thiredCategoryIndex: null, //三级索引
				thiredInnter: 0, //三级点击事件
				//----------------****--------------
				fourSmallClassActiveInd: 0, // 4级分类索引
				fourClassActiveItem: [],
				//---------------****---------------
				categoryName: [], //名称集合
			};
		},
		onLoad() {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.getCategoryTree();
		},
		methods: {
			// 点击顶部的大分类
			async topBigClassClickFn(item, index) {
				let that = this;
				that.topBigClassActive = index;
				
				that.leftSmallClassActive = 0; //二级分类下标

				that.rightGoodsRuleActive = 0;
				this.threeClassActiveItem = {};
				that.fourClassActiveItem = [];
			},
			// 设置分类模态框的状态
			setShowAllClassFlagFn(flag) {
				setTimeout(() => {
					this.showAllClassFlag = flag;
					return false;
				}, 300);
				return false;
			},
			// 查看全部按钮点击
			allClassBtnClickFn() {
				this.showAllClassFlag = !this.showAllClassFlag;
			},

			// 遮罩层弹框 阻止 下面页面 滚动 阻止冒泡
			catchTouchMove() {
				return false;
			},
			// 二级分类点击事件
			selectCategory(index, item) {
				let that = this;
				// if (this.multiArray[index].childList != '') {
				// 	this.selectedCategory = index; //索引
				// 	this.thiredCategoryIndex = 0; //二级目录进行初始化
				// 	this.thiredInnter = 0; //三级目录进行初始化
				// } else {
				// 	wx.showToast({
				// 		title: '暂未添加类目',
				// 		icon: 'none',
				// 		duration: 2000
				// 	});
				// };
				that.leftSmallClassActive = index;
				that.threeClassActiveItem = item;
				that.fourClassActiveItem = [];

			}, //二级分类内容

			// 三级分类点击
			threeCategory(item, index) {
				let that = this;
				that.thiredCategoryIndex = index;
				that.fourSmallClassActiveInd = index; //设置四级索引
				that.fourClassActiveItem = item.childList;
			},

			// 最后分类点击事件
			fourCategory(item, index) {
				let that = this;
				this.getCategoryName(); //获取名称
				this.$set(that.categoryName,3,item.name)
				this.productClass.id = item.id;
				this.productClass.name = that.categoryName.join('/');
				this.queryAddSort();
				setTimeout(()=>{
					this.$router.go(-1); // 页面跳转放在异步操作完成后
				},200)
				
			},

			// 获取名称
			getCategoryName() {
				let that = this;
				
				this.$set(that.categoryName, 0, that.multiArray[that.topBigClassActive].name);
				this.$set(that.categoryName, 1, that.multiArray[that.topBigClassActive].childList[
					that.leftSmallClassActive].name);
				this.$set(that.categoryName, 2, that.multiArray[that.topBigClassActive].childList[
					that.leftSmallClassActive].childList[that.thiredCategoryIndex].name);
			},
			
			//获取数据树
			getCategoryTree() {
				storeCategoryAllApi().then((res) => {
					this.multiArray = res.data;
					this.topBigClassData = res.data;
				})
			},
			
			//添加分类确认
			queryAddSort() {
				const pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
				const prevPage = pages[pages.length - 2]; // 获取上一级页面对象
				uni.navigateBack({
					delta: 1,
					success: (res) => {
						uni.$emit('productClassTherFun', this.productClass); // 通过事件总线传递数据给上一个页面
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	.qian_color {
		background-color: $nav-two-btn5;
		color: $main-color-theme2;
	}

	page {
		height: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.header {
		background-color: #fff;
	}

	.tab-view {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	// .content {
	// 	flex: 1;
	// 	overflow: hidden;
	// }

	.scroll-view {
		height: 100%;
	}

	/* 分类 */
	.categories {
		// flex: 1;
		// min-height: 400rpx;
		display: flex;
	}

	/* 一级分类 */
	.primary {
		overflow: hidden;
		width: 180rpx;
		flex: none;
		// background-color: #fff;
		background-color: #efecef;

		.item {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 96rpx;
			font-size: 26rpx;
			color: #595c63;
			position: relative;
			padding: 8px;

			&::after {
				content: '';
				position: absolute;
				left: 42rpx;
				bottom: 0;
				width: 96rpx;
				border-top: 1rpx solid #e3e4e7;
			}
		}

		.active {
			// background-color: #fff;
			background-color: #f9f6f9;
			// @include main_color(theme);
			font-weight: bolder;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 8rpx;
				height: 100%;
				// @include main_bg_color(theme);
			}
		}
	}

	.primary .item:last-child::after,
	.primary .active::after {
		display: none;
	}

	/* 二级分类 */
	.secondary {
		// background-color: #fff;
		background-color: #f2f2f2;
		// height: 100%;
		min-height: 845px;
		width: 200rpx;

		.item {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 96rpx;
			font-size: 26rpx;
			color: #595c63;
			position: relative;
			// padding: 8px;

			&::after {
				content: '';
				position: absolute;
				// left: 42rpx;
				bottom: 0;
				width: 100rpx;
				border-top: 1rpx solid #e3e4e7;
			}
		}

		.active {
			// background-color: #fff;
			background-color: #f9f9f9;
			@include main_color(theme);

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 8rpx;
				height: 100%;
				// @include main_bg_color(theme);
			}
		}

	}

	.threeCategory {
		.on {
			// background-color: #fff;
			background-color: #f9f9f9;
			// @include main_color(theme);
			font-weight: bold;
		}
	}

	.productSort .aside {
		background-color: #ececec;
		overflow-y: auto;
		overflow-x: hidden;
		width: 180rpx;
		// height: 100%;
		height: 1700rpx;
		overflow: hidden;
	}

	.productSort .aside .item {
		height: 100rpx;
		width: 100%;
		font-size: 26rpx;
		color: #424242;
	}

	.productSort .aside .item_text {
		padding-left: 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.productSort .aside .item.on {
		background-color: #f6f6f6;
		// border-left: 4rpx solid var(--view-theme);
		width: 100%;
		text-align: center;
		// @include main_color(theme);
		font-weight: bold;
		// border-left: 2px solid;
		// @include border_color(theme);

	}

	// 新增功能样式---------------------------------
	.all-class-wrap {
		position: absolute;
		z-index: 50;
		left: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0.3);
		overflow-x: hidden;

		.class-item-block {
			// border-radius: 0px 0px 10px 10px;
			background: #ffffff;
			font-size: 0;

			.class-list {
				display: flex;
				flex-wrap: wrap;
				text-align: center;
				align-items: center;
				justify-content: center;

				.class-item {
					// display: inline-flex;
					flex: 0 0 calc(33.333% - 20px);
					/* 每行显示三个项目，减去间距 */
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					margin: 10rpx 20rpx;
					width: 160rpx;
					// height: 158rpx;


					.class-item-text {
						display: inline-block;

						padding: 0 0.5em;
						line-height: 40rpx;
						font-size: 24rpx;
						color: #202020;
						width: 210rpx;
						padding: 10rpx 0;
						border-radius: 6rpx;
						background-color: #f8f8f8;
					}

					.active-item {
						background-color: $nav-two-btn5;
						color: $main-color-theme2;
						font-weight: bolder;
					}
				}
			}

		}
	}

	.class-link-btn {
		position: relative;
		// z-index: 10;
		background-color: $bg-grey-color;
		padding: 10rpx 0 5rpx;

		.show-all-class-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: absolute;
			z-index: 1;
			top: 0;
			right: 0;
			width: 78rpx;
			height: 100%;
			background: #ffffff;
			color: #505050;
			font-size: 24rpx;
			border-bottom: 1px solid #f6f6f6;

			.bottom-icon {
				width: 30rpx;
				height: 30rpx;
				position: relative;

				.iconfont {
					transition: 0.1s;
					transform: rotate(90deg);

					&::before {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translateX(-50%) translateY(-50%);
					}
				}
			}
		}

		.btn-link-scroll-wrap {
			width: 100%;
			// height: 158rpx;
			overflow: hidden;

			.btn-link-scroll-view-dom {
				white-space: nowrap;
				// height: 200rpx;
			}

			.item {
				display: inline-flex;
				flex-direction: column;
				// justify-content: space-between;
				align-items: center;
				justify-content: center;
				padding-bottom: 4rpx;
				margin: 0 14rpx;
				// width: 140rpx;
				height: 80rpx;
				vertical-align: top;
			}

			image {
				display: block;
				width: 104rpx;
				height: 104rpx;
				border-radius: 50%;
			}

			text {
				display: inline-block;
				padding: 0 0.5em;
				line-height: 40rpx;
				font-size: 26rpx;
				// color: $grey1-color;
			}
		}

		.right-content-block {
			&::-webkit-scrollbar {
				width: 0;
				height: 0;
				color: transparent;
				white-space: nowrap;
			}

			width: 569rpx;
			padding-bottom: 96rpx;
			position: relative;

			.loading-wrap {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				z-index: 100;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: #ffffff;

				.loading-block {
					display: inline-block;
					position: relative;
					width: 80px;
					height: 80px;
					transform: scale(0.5);

					@keyframes lds-ring {
						0% {
							transform: rotate(0deg);
						}

						100% {
							transform: rotate(360deg);
						}
					}

					.loading-item {
						box-sizing: border-box;
						display: block;
						position: absolute;
						width: 64px;
						height: 64px;
						margin: 8px;
						border: 8px solid red;
						border-radius: 50%;
						animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
						border-color: #fff transparent transparent transparent;

						&1 {
							animation-delay: -0.45s;
						}

						&2 {
							animation-delay: -0.3s;
						}

						&3 {
							animation-delay: -0.15s;
						}
					}
				}
			}

			.class-banner {
				width: 550rpx;
				height: 200rpx;
				margin: 10rpx auto 0;
				display: block;

				image {
					width: 550rpx;
					height: 200rpx;
				}
			}

		}

	}
</style>